<template>
  <view class="create-order-container">
    <view class="address-container">
      <view>
        <view class="address-name-phone">{{ address?.taker_name_ }}<text class="taker_phone_">{{ address?.taker_phone_
        }}</text></view>
        <view>{{ address?.taker_region_ }}{{ address?.taker_address_ }}</view>
      </view>
      <navigator url="/pages/user/address" open-type="navigate" hover-class="navigator-hover">
        <uni-icons type="right" size="20"></uni-icons>
      </navigator>
    </view>

    <view class="store-product-container">
      <view class="product-container" v-for="item in order?.cartOrderList " :key="item.mainId">
        <view class="store-name"><uni-icons type="shop-filled" size="20"></uni-icons>{{ item.mainName }}</view>
        <view class="product-content">
          <view class="product-info-container">
            <image v-for="it in item.items" class="productImg" :key="it.productId" :src="it.productImg" mode="aspectFill">
            </image>
            <view class="product-info" v-if="item.items.length == 1">
              <view class="name">{{ item.items[0].name }}</view>
              <view class="format">规格编号：{{ item.items[0].code }}</view>
              <view class="format">规格：{{ item.items[0].format }}</view>
              <view class="price">￥{{ item.items[0].price.toFixed(2) }}</view>
            </view>
          </view>
          <view class="total-container" @tap="lookBill(item.items)">
            <view class="total-content">
              <view>{{ order?.totalProductQty }}种</view>
              <view>共{{ order?.totalProductCount }}件</view>
            </view>
            <uni-icons type="right" size="20"></uni-icons>
          </view>
        </view>
        <view class="notice-container">
          <text class="title">
            留言
          </text>
          <input v-model="notice" class="input" placeholder="请输入留言" placeholder-class="input-placeholder" />
        </view>
        <view class="upload-comtainer">
          <uni-file-picker limit="4" fileMediatype="image" mode="grid" @select="select" @progress="progress"
            @success="success" @fail="fail" :imageStyles="imageStyles" title="上传附件，最多4张，单张不超过3M"></uni-file-picker>
        </view>
      </view>
    </view>

    <view class="order-footer" :style="{ paddingBottom: $safeArea.safeAreaBottom + 'px' }">
      <view class="order-total-amount">
        订单总额: <text class="total-amount">￥{{ order?.totalAmount.toFixed(2) }}</text>
      </view>
      <view class="btn-confirm">提交订单</view>
    </view>

    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view class="close-container">
        <uni-icons type="closeempty" @tap="popup?.close()" size="24"></uni-icons>
      </view>
      <scroll-view class="bill-container" scroll-y>
        <view class="product" v-for="item in list" :key="item.productId">
          <image class="product_img" :src="item.productImg" mode="aspectFill" />
          <view>
            <view class="product_name ellipsis">{{ item.name }}</view>
            <view class="product_footer">
              规格编号：{{ item.code }}
            </view>
            <view class="product_footer">
              规格：{{ item.format }}
            </view>
            <view class="product_footer red">
              <text>￥{{ item.price }}</text>
              <text>x{{ item.qty }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </uni-popup>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import Apis from "@/services/modules/order"
import type { AdddressData } from "@/types/order"
import type { cartOrderListItem } from "@/types/goods"
import { useOrderStore } from "@/stores/modules/order"

const { order } = useOrderStore()

onMounted(() => {
  getAddressData()
})

const address = ref<AdddressData>()
const getAddressData = async () => {
  const { data } = await Apis.getAddressListApi()
  address.value = data.find(it => it.is_default_ == 1)
}

const notice = ref("")

const imageStyles = {
  width: 94,
  height: 104,
  border: {
    radius: "6px"
  }
}

const popup = ref<{
  open: () => void
  close: () => void
}>()

const list = ref<cartOrderListItem[]>()
const lookBill = (item: cartOrderListItem[]) => {
  list.value = item
  popup.value?.open()
}

const select = (e: UniHelper.UniFilePickerOnSelectEvent) => {
  console.log(e.tempFiles)
}

const progress = (e: UniHelper.UniFilePickerOnProgressEvent) => {
  console.log(e.progress)
}

const success = (e: UniHelper.UniFilePickerOnSuccessEvent) => {
  console.log(e.tempFiles)
}

const fail = (e: UniHelper.UniFilePickerOnFailEvent) => {
  console.log(e.tempFiles)
}

</script>

<style lang="scss">
page {
  background-color: #f6f6f6;
}

.create-order-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .address-container {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    line-height: 24px;
    padding: 12px 6px 18px;
    position: relative;

    .address-name-phone {
      font-size: 16px;
      font-weight: 600;

      .taker_phone_ {
        padding-left: 16px;
      }
    }

    &::after {
      content: "";
      width: 100%;
      height: 6px;
      background: url("../../static/images/address-bg.png") repeat-x center/80px 170px;
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .store-product-container {
    flex: 1;
    margin-top: 16px;
    padding: 6px;
    $wh: 80px;

    .store-name {
      display: flex;
      align-items: center;
      padding: 12px 0 18px;
      font-weight: 600;
      border-bottom: #dddddd 1px solid;
      background-color: #fff;
    }

    .product-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 6px;
      border-bottom: #dddddd 1px solid;
      background-color: #fff;

      .product-info-container {
        display: flex;
        align-items: center;
        flex: 1;
        overflow: hidden;
        height: $wh;

        .productImg {
          width: $wh;
          height: $wh;
          margin-right: 6px;
          border-radius: 4px;
        }

        .product-info {
          font-size: 14px;
          padding: 6px 0;
          flex: 1;

          .name {
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .format {
            font-size: 12px;
            line-height: 24px;
            color: $uni-text-color-grey;
          }

          .price {
            color: red;
            font-weight: 600;
          }
        }
      }

      .total-container {
        width: 25%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        height: $wh;
        padding-left: 12px;

        .total-content {
          text-align: center;
        }

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 8px;
          height: 100%;
          box-shadow: -2px 0px 4px rgba(153, 153, 153, 0.2);
        }
      }
    }

    .notice-container {
      display: flex;
      font-size: 14px;
      padding: 16px 6px;
      border-bottom: #dddddd 1px solid;
      align-items: center;
      background-color: #fff;

      .title {
        font-weight: 600;
        margin-right: 12px;
      }

      .input {
        flex: 1;
      }
    }

    .upload-comtainer {
      display: flex;
      font-size: 14px;
      padding: 16px 6px;
      border-bottom: #dddddd 1px solid;
      background-color: #fff;
    }
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;

    .order-total-amount {
      padding-left: 8px;

      .total-amount {
        padding-left: 4px;
        color: $uni-color-warning;
        font-weight: 600;
      }
    }

    .btn-confirm {
      background-color: $uni-color-warning;
      color: #fff;
      height: 52px;
      width: 112px;
      text-align: center;
      line-height: 52px;
    }
  }
}

.close-container {
  padding: 8px 12px;
  display: flex;
  justify-content: flex-end;
}

.bill-container {
  max-height: 60vh;
  background-color: #f6f6f6;

  .product {
    margin-bottom: 12px;
    background-color: #fff;
    display: flex;
    padding: 4px;
    border-radius: 4px;

    .product_img {
      width: 158px;
      height: 108px;
      margin-right: 12px;
      border-radius: 4px;
    }

    .product_name {
      $padding: 4px;
      padding: $padding ;
      width: calc(100% - 2 * $padding);
      font-size: 14px;
    }

    .product_footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2px;
      font-size: 14px;
      color: $uni-text-color-grey;
    }

    .red {
      color: red;
    }
  }
}

:deep(.uni-file-picker__header) {
  color: $uni-text-color-grey !important;
}
</style>
